<template>
  <view class="live-container">
    <!-- 顶部区域 -->
    <view class="top-bar">
      <u-button type="primary" size="mini" shape="circle">北京</u-button>
      <u-search placeholder="搜索门店 / 圈子" class="search-bar" />
      <u-icon name="more-dot-fill" size="28" color="#333" class="more-btn" />
    </view>
    <!-- 筛选区 -->
    <view class="filter-section">
      <u-button type="default" size="mini" shape="circle">日期选择</u-button>
      <u-button type="default" size="mini" shape="circle">全部区域</u-button>
      <u-button type="primary" size="mini" shape="circle">我的直播</u-button>
    </view>
    <!-- 品牌宣传图 -->
    <view class="banner-section">
      <image class="banner" src="/static/brand-poster.png" mode="aspectFit" />
    </view>
    <!-- 主内容区（空状态） -->
    <view class="list-section">
      <u-empty text="暂无直播" mode="live" />
    </view>
  </view>
</template>

<script>
export default {
  name: 'LiveIndex',
}
</script>

<style scoped>
.live-container {
  padding-top: 100rpx;
  min-height: 100vh;
  background: #f8f8f8;
}

.top-bar {
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 32rpx;
}

.search-bar {
  flex: 1;
  margin: 0 16rpx;
}

.more-btn {
  margin-left: 16rpx;
}

.filter-section {
  display: flex;
  gap: 16rpx;
  padding: 0 32rpx 16rpx 32rpx;
}

.banner-section {
  margin: 16rpx 0;
  text-align: center;
}

.banner {
  width: 80vw;
  height: 180rpx;
  border-radius: 16rpx;
}

.list-section {
  margin-top: 32rpx;
}
</style>
